$(function () {
    //员工活动的动画效果
    // 鼠标经过效果
    $('.activity_conter .item').mouseenter(function () {
        $(this).find('.label').stop().animate({
            opacity: 1,
        }, 300).css('transform', 'translate(0px, 0px)')
        $(this).find('.mask-bg').css('transform', 'translate(0px, 0px)');

    })
    // 鼠标离开效果
    $('.activity_conter .item').mouseleave(function () {
        $(this).find('.label').stop().animate({
            opacity: 0,
        }, 300).css('transform', 'translate(0px, 88px)')
        $(this).find('.mask-bg').css('transform', 'translate(0px, 271px)')

    })
    //tab栏切换
    // 动态创建选项卡div
    $('.work_con').each(function (i, ele) {
        $('.workconbox').append($('<div></div>'))
    })
    //第一个div添加类名
    $('.workconbox div').eq(0).addClass('w120')
    // 鼠标经过大盒子选项卡宽度变宽
    $('.staff_work_environment').mouseover(function () {
        $('.workconbox').stop().animate({
            width: 80
        })
    })
    // 鼠标离开大盒子选项卡宽度变窄
    $('.staff_work_environment').mouseout(function () {
        $('.workconbox').stop().animate({
            width: 50
        })
    })
    // 经过离开选项卡背景变化,对应内容变化
    $('.workconbox div').mouseenter(function () {
        $('.work_con').eq($(this).index()).show().siblings('.work_con').hide()
        $(this).addClass('w120').siblings().removeClass('w120')
    })
    // 轮播图 ,未使用on()时间处理
    //使用transform完成轮播图
    var joinbox = document.querySelector('.joinbox')
    var dian = joinbox.querySelector('.dian')
    var slideshow = joinbox.querySelector('.slideshow')
    //动态创建小圆点
    $('.slideshow li').each(function (index, ele) {
        $('.dian').append($('<li></li>'))
    })
    //第一个小圆点添加特殊样式
    $('.dian li:first').addClass('red')
    //复制轮播图第一个li,和最后一个li添加到指定位置
    var li = slideshow.children[0].cloneNode(true)
    slideshow.appendChild(li)
    var li = slideshow.children[slideshow.children.length - 2].cloneNode(true)
    slideshow.insertBefore(li, slideshow.children[0])

    var num = 0
    // 节流阀
    var flge = true
    //点击右侧轮播
    $(' .you').click(function () {
        if (flge) {
            // 节流阀关闭
            flge = false
            num >= $('.dian li').length && (num)
            num++
            $('.slideshow').css('transition', 'all 1s')
            $('.slideshow').css('transform', 'translateX(' + -num * 1200 + 'px)')
            $('.dian li').eq(num).addClass('red').siblings().removeClass('red')
            num == $('.dian li').length && ($('.dian li').eq(0).addClass('red').siblings().removeClass('red'))

        }
    })
    //过渡完成事件监听,特殊节点执行无缝衔接函数
    slideshow.addEventListener('transitionend', function () {
        if (num >= $('.dian li').length) {
            num = 0
            slideshow.style.transition = '';
            $('.slideshow').css('transform', 'translateX(' + -num * 1200 + 'px)')
            $('.dian li').eq(num).addClass('red').siblings().removeClass('red')
        } else if (num <= -1) {
            num = $('.dian li').length - 1
            slideshow.style.transition = '';
            $('.slideshow').css('transform', 'translateX(' + -num * 1200 + 'px)')
        }
        // 节流阀打开
        flge = true
    })
    //点击左侧按钮轮播
    $('.zuo').click(function () {
        if (flge) {
            flge = false
            num--
            $('.slideshow').css('transition', 'all 1s')
            $('.slideshow').css('transform', 'translateX(' + -num * 1200 + 'px)')
            $('.dian li').eq(num).addClass('red').siblings().removeClass('red')

        }
    })
    //点击小圆点轮播
    $('.dian li').click(function () {
        num = $(this).index()
        $('.slideshow').css('transition', 'all 1s')
        $('.slideshow').css('transform', 'translateX(' + -num * 1200 + 'px)')
        $('.dian li').eq(num).addClass('red').siblings().removeClass('red')

    })
    //定时器自动轮播
    var timer = setInterval(function () {
        $('.you').click()
    }, 2000)
//鼠标经过离开开启关闭定时器
    $('.joinbox').hover(function () {
        clearInterval(timer)
    }, function () {
        clearInterval(timer)
        timer = setInterval(function () {
            $('.you').click()
        }, 1000)
    })
    //左右按钮显示隐藏
    //节流阀,提高动画流畅度
    var flag1 = true
    $('.joinbox').mousemove(function (e) {
        if (flag1) {
            // 节流阀关闭
            flag1 = false
            // 判断鼠标位置只使一侧按钮显示
            if (e.pageX - $('.joinbox').offset().left >= $('.joinbox').outerWidth() / 2) {
                $('.you').stop().fadeIn(300, function () {
                    // 动画执行完毕节流阀开启
                    flag1 = true
                })
                $('.zuo').stop().fadeOut(300)
            } else {
                $('.you').stop().fadeOut(300, function () {
                    flag1 = true
                })
                $('.zuo').stop().fadeIn(300)
            }
        }
    })
    //鼠标离开两侧按钮隐藏
    $('.joinbox').mouseleave(function () {
        $('.you').stop().fadeOut(300, function () {
            //此处添加节流阀开启,防止小bug
            flag1 = true
        })
        $('.zuo').stop().fadeOut(300)
    })
})

